<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div
            style="
                width: 50px;
                height: 50px;
                position: absolute;
                z-index: 99999;
                font-size: 20px;
                background: rgb(0, 0, 0, 0.5);
                border-radius: 50px;
                text-align: center;
                line-height: 50px;
                left: 10px;
                top: 10px;
            "
            onclick="history.go(-1);"
        >
            ◀
        </div>
        <div
            style="
                width: fit-content;
                height: 40px;
                font-size: 20px;
                margin: auto;
            "
            id="exhibit"
        ></div>
        <div id="box">
            <img src="http://api.zzgoodqc.cn/uploads/1661077570.jpg" alt="" />
        </div>
        <div style="width: 90%; height: 80px; margin: auto; text-align: center">
            <img src="http://api.zzgoodqc.cn/uploads/1661084435.jpg" alt="" />
        </div>

        <div id="box1"></div>

        <div id="bottom">
            <div id="small">
                <span id="open"></span><br />
                <span id="yuan"></span>
            </div>
        </div>
    </body>
    <script>
        var names = JSON.parse(localStorage.getItem("arrse"));
        $(function () {
            if (!localStorage.getItem(names[0].nm + "1")) {
                localStorage.setItem(names[0].nm + "1", JSON.stringify([]));
            }
            input();
            let data = JSON.parse(localStorage.getItem(names[0].nm + "1"));
            for (i of data) {
                $("input:eq(" + i + ")").prop("checked", true);
            }
            $("#exhibit").html(names[0].nm + "--2号影厅");
        });
        var arr = [];
        function input() {
            let html = "";
            for (let i = 0; i < 70; i++) {
                html += `<input type="checkbox" name="" id="" onchange='change(${i})'>`;
            }
            $("#box1").html(html);
        }

        function change(index) {
            arr = JSON.parse(localStorage.getItem(names[0].nm + "1"));
            if ($("input:eq(" + index + ")").prop("checked")) {
                arr.push(index);
            } else {
                arr = arr.filter(function (item) {
                    return item != index;
                });
            }
            $("#small").show();
            let num = $("input:checked").length;
            $("#open").html("已选中" + num + "张");
            $("#yuan").html("总共" + num * 30 + "元");

            localStorage.setItem(names[0].nm + "1", JSON.stringify(arr));
        }
    </script>
    <style>
        #box {
            width: 150px;
            height: 20px;
            margin: auto;
            margin-bottom: 20px;
        }
        #box1 {
            width: 300px;
            height: 250px;
            margin: auto;
            text-align: center;
        }

        #bottom {
            width: 95%;
            height: 50px;
            position: absolute;
            bottom: 10px;
            background-color: aqua;
        }

        body {
            background-color: #f9f0f1;
        }
        #small {
            width: 100px;
            height: 45px;
            background-color: #fff;
            margin-left: 10px;
            border-radius: 10px;
            font-size: 10px;
            display: none;
        }
    </style>
</html>
